<template>
    <view class="login" :style="{'background-image':'url('+ bgUrl +')'}">
        <view class="title">
            <text class="title_name">输入短信验证码</text><br />
            <text class="title_msg">已向您的手机<text>{{mobile}}</text>发送验证码</text>
        </view>

        <view class="formBox">
            <view class="inputLine">
                <!-- <view class="items" v-for="(item,index) in checkNumber" :key="index">
                    <input type="text" :value="item" class="numberFont" maxlength="1"
                        :focus="firstCode == index? true:false" @input="fill(index,$event)" />
                </view> -->
                <view style="margin: 0 auto;">
                    <u-code-input mode="line" hairline :maxlength="4" v-model="code" size="54" :focus="true" color="#000" space="20" fontSize="32"></u-code-input>
                </view>
            </view>

            <view class="msg">
                <text @click="send">重新发送 <text v-show="is_send" class="min">({{time}})</text> </text>
            </view>

            <view class="btnLine loginBox">
                <button type="default" @click="loginIn">立即登录</button>
            </view>
        </view>


    </view>
</template>

<script>
    import loginBg from "../../static/imgs/login/loginBg_md.png";
    export default {
        data() {
            return {
                bgUrl: loginBg,
                // tel: '',
                // firstCode: 0,
                // smscode: '1234',
                // verifyShow: true,
                // checkNumber: ['', '', '', ''],
                // min: 59,

                mobile: '',
                code: '',
                
                is_send: false,
                time: 60
            };
        },
        components: {

        },
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
            this.mobile = options.mobile;
            this.timedown();
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            // this.setbImg();  //动态切换背景
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {
            // clearInterval(this.imgTime);
        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {
            // clearInterval(this.imgTime);
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {

            clearInput() {
                // console.log('点击清除')
                this.setData({
                    tel: ""
                })
            },
            identify() {

            },

            fill(index, e) {
                console.log(index);
                this.checkNumber[index] = e.detail.value;
                this.firstCode++;


            },
            timedown: function() {
                this.is_send = true;
                var timer = setInterval(() => {
                    this.time--;
                    if(this.time === 0) {
                        this.time = 60;
                        this.is_send = false;
                        clearInterval(timer);
                    }
                }, 1000);
            },

            send() {
                if(!this.is_send) {
                    this._ajax({
                        url: '/api/sms/send',
                        data: {
                            mobile: this.mobile,
                            event: 'register'
                        },
                        success: res => {
                            if(res.code == 1) {
                                this.timedown();
                            }else{
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                }
                
            },

            loginIn() {
                if(!this.code || this.code.length !== 4) {
                    return this._toast('请输入验证码');
                }
                this._ajax({
                    url: '/api/user/mobilelogin',
                    data: {
                        mobile: this.mobile,
                        code: this.code
                    },
                    success: res => {
                        this._toast(res.msg);
                        if(res.code == 1) {
                            uni.$emit('login', res.data);
                            uni.setStorageSync('token', res.data.token);
                            uni.setStorageSync('user', res.data);
                            setTimeout(() => {
                                var pages = ['login/role', 'login/step1', 'login/step2', 'login/step3',
                                    'login/step4', 'login/step5'
                                ];
                                if (pages[res.data.step]) {
                                    this._toRedirect(pages[res.data.step]);
                                } else {
                                    uni.reLaunch({
                                        url: '/pages/views/tabBar/home'
                                    });
                                }
                            }, 1000);
                        }
                    }
                }, 1);
            }


        }
    };
</script>

<style scoped lang="less">
    .login {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        transition: all 0.6s ease-in-out;
        background-size: 100% 100%;


        .title {
            padding: 142px 0 0 27px;

            .title_name {
                width: 201px;
                height: 31px;
                font-size: 60upx;
                font-weight: bold;
                line-height: 51px;
                color: #FFFFFF;
                letter-spacing: 8upx;
                opacity: 1;
            }

            .title_msg {
                font-size: 24upx;
                line-height: 40upx;
                color: #fff;
                font-weight: 400;
            }
        }

        .formBox {
            width: 100%;
            margin-top: 240upx;
            margin-left: auto;


            .inputLine {
                width: 590upx;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 5px;
                position: relative;

                .items {
                    width: 120upx;
                    border-bottom: 2px solid #F5F6FA;

                    input {
                        width: 100%;
                        text-align: center;
                        font-size: 50upx;


                    }
                }

                .phoneNum {
                    font-size: 26upx;
                    width: calc(100% - 120upx);

                }

                .close_btn {
                    image {
                        width: 28upx;
                        height: 28upx;
                        position: absolute;
                        right: 10upx;
                        bottom: 5px;
                        z-index: 2;
                    }

                }
            }

            .msg {
                width: 100%;
                text-align: center;
                margin-top: 50upx;
                color: #666;

                .min {
                    padding-left: 10upx;
                }
            }



        }

        .btnLine {
            margin-top: 98upx;

            button {
                background-color: #456eaf;
                color: #fff;
            }
        }

    }

    .agree {
        margin-top: 128upx;
    }
</style>
